<template>
    <div>
        <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="httpRequest"
        >
            <img
                v-if="value"
                :src="value"
                class="avatar"
            />
            <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
            />
        </el-upload>
    </div>
</template>
<script>
// vuehr-89-1314477458
// ap-shanghai
// ID:  AKID88vUounRt78vTmskNTL0QcZNwHNGvMtC
// Key: 93jBQQCj27yrVhmjRyKTO9i3A4kBbnmX
import COS from 'cos-js-sdk-v5' // 通过 npm 安装的 SDK
var cos = new COS({
    SecretId: 'AKID88vUounRt78vTmskNTL0QcZNwHNGvMtC',
    SecretKey: '93jBQQCj27yrVhmjRyKTO9i3A4kBbnmX'
})

//下面代码就是我们上传图片的 示例代码
//cos.putObject({
//    Bucket: 'examplebucket-1250000000', /* 填入您自己的存储桶，必须字段 */
//    Region: 'COS_REGION',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
//    Key: '1.jpg',  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
//    Body: fileObject, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
//    onProgress: function(progressData) {
//        console.log(JSON.stringify(progressData));
//    }
//}, function(err, data) {
//    console.log(err || data);
//});

export default {
    name: '',
    props: {
        value: {
            type: String,
            default: ''
            // required: true
        }
    },
    data() {
        return {
            // imageUrl: ''
        }
    },
    methods: {
        // this.$emit('input', url)
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg'
            const isLt2M = file.size / 1024 / 1024 < 2

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!')
            }
            return isJPG && isLt2M
        },
        httpRequest(value) {
            console.log(value)
            // 等我们把图片处理好了以后,在这里自己写一些 axios 发请求,或者调用腾讯云储存的方法,往腾讯云传递图片
            //下面代码就是我们上传图片的 示例代码
            cos.putObject(
                {
                    Bucket: 'vuehr-89-1314477458' /* 填入您自己的存储桶，必须字段 */,
                    Region: 'ap-shanghai' /* 存储桶所在地域，例如ap-beijing，必须字段 */,
                    Key: value.file.name /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */,
                    Body: value.file /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
                },
                (err, data) => {
                    console.log(err || data)
                    if (data.Location && data.statusCode === 200) {
                        this.$emit('input', `http://${data.Location}`)
                    } else {
                        this.$message.error({ message: '上传失败' })
                    }
                }
            )
        }
    }
}
</script>
